<template>
    <mt-tabbar fixed v-model="activeTab" class="tab_footer">
        <mt-tab-item id="wallet" @click.native="tabClick">
            <img v-if="activeTab == 'wallet'" slot="icon" src="@/assets/img/m/footerWallet0.png">
            <img v-else slot="icon" src="@/assets/img/m/footerWallet1.png">
            钱包
        </mt-tab-item>
        <mt-tab-item id="mine" @click.native="tabClick">
            <img v-if="activeTab == 'mine'" slot="icon" src="@/assets/img/m/footerUser0.png">
            <img v-else slot="icon" src="@/assets/img/m/footerUser1.png">
            我的
        </mt-tab-item>
    </mt-tabbar>
</template>

<script>

    import {mapMutations} from 'vuex';

    export default {
        name: "TabFooter",
        props:{
            activeLink:String,
        },
        data(){
            return{
                activeTab: this.activeLink
            }
        },
        methods:{
            ...mapMutations(['changeTab']),
            tabClick(){
                this.changeTab(this.activeTab);
                this.$emit("changeTab",this.activeTab)
            }
        }
    }
</script>

<style>
    .tab_footer .mint-tab-item-label{
        color:#6f7078;
    }
    .tab_footer{
        box-shadow: 0 -5px 10px #ddd;
    }
</style>
